<template>
  <div class="plan2-page f-c ">
    <el-form inline>
      <el-form-item label="种植计划组名称">
        <el-input v-model="searchParams.plantProcessName" clearable placeholder="" />
      </el-form-item>
      <el-form-item label="种植作物">
        <el-select v-model="searchParams.cropSubName" clearable placeholder="">
          <el-option v-for="item in options" :value="item.typeName" :label="item.typeName" />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" style="margin-left: 15px" @click="onSearch">搜索</el-button>
        <el-button type="primary" style="margin-left: 15px" @click="onReset">清除</el-button>
      </el-form-item>
      <el-form-item />
    </el-form>
    <div class="line" />
    <div style="margin-bottom: 20px">
      <el-button type="primary" plain icon="el-icon-plus" @click="onAdd">添加流程</el-button>
    </div>
    <div class="table-box">
      <el-table
        v-loading="loading"
        height="100%"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="index" align="center" label="序号" />
        <el-table-column prop="name" label="种植计划组名称" align="center" />
        <el-table-column prop="cropName" label="种植作物" align="center" />
        <el-table-column prop="regionId" label="种植区域" align="center" />
        <el-table-column prop="processNum" label="工序数量" align="center" />
        <el-table-column prop="fieldNum" label="试用田块数量" align="center" />
        <el-table-column label="操作" fixed="right" width="160px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="dialogEdit(scope.row)"
            >编辑 </el-button>
            <el-button
              type="text"
              @click="onDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
    <el-drawer
      title="种植流程定制"
      :visible.sync="drawer"
      direction="rtl"
      size="1248px"
    >
      <div style="padding: 20px">
        <el-form ref="formRef" inline :model="ruleForm" label-width="100px">
          <el-form-item prop="name" label="种植流程名称">
            <el-input v-model="ruleForm.name" clearable />
          </el-form-item>
          <el-form-item prop="cropSubId" label="种植作物">
            <el-select v-model="ruleForm.cropSubId" clearable placeholder="">
              <el-option v-for="item in options" :value="item.typeId" :label="item.typeName" />
            </el-select>
          </el-form-item>
          <el-form-item prop="name" label="适用地域">
            <el-cascader
              v-model="ruleForm.regionId"
              clearable
              :options="regionList"
              :props="{ value: 'id', label: 'label'}"
              @change="changeRegion"
            />
            <el-input v-model="ruleForm.villageName" clearable style="width: 120px;margin: 0 10px" />
            <el-input v-model="ruleForm.townName" clearable style="width: 120px" />
          </el-form-item>
        </el-form>
        <div class="line" />
        <Item v-if="ruleForm.id" ref="itemRef" />
        <span slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="drawer = false">取 消</el-button>
          <el-button type="primary" @click="onSave">提 交</el-button>
        </span>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import crud from '@/mixins/crud';
import Item from './item'
import { getRegions, http_pest, http_plant_group } from '@/api';
export default {
  name: 'UserPage',
  components: {
    Item
  },
  mixins: [crud],
  data() {
    return {
      request: http_plant_group,
      searchParams: {
        plantProcessName: '',
        cropSubName: ''
      },
      tableData: [
      ],
      options: [],
      regionList: [],
      drawer: false,
      ruleForm: {
        id: undefined,
        name: '',
        cropSubId: '',
        villageName: '',
        townName: '',
        regionId: [],
      }
    }
  },
  created() {
    // 作物
    http_pest.cropList().then(res => {
      this.options = res.data
    })
    // 地区
    getRegions().then(res => {
      this.regionList = res.data.children
    })
  },
  methods: {
    initData() {
      this.loading = true
      this.request.page(this.getQueryParams()).then(res => {
        this.tableData = res.data.list
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    onAdd() {
      this.drawer = true
      this.ruleForm = {
        id: undefined,
        name: '',
        cropSubId: '',
        villageName: '',
        townName: '',
        regionId: [],
      }
    },
    dialogEdit(item) {
      for (const key in this.ruleForm) {
        this.ruleForm[key] = item[key]
      }
      if(this.ruleForm.regionId) {
        this.ruleForm.regionId = this.ruleForm.regionId.split(',')
      }
      this.drawer = true
      this.$nextTick(() => {
        this.$refs.itemRef.initData(item.id)
      })
    },
    onSave() {
      this.request[this.ruleForm.id ? 'update' : 'create']({
        ...this.ruleForm,
        regionId: this.ruleForm.regionId.join(',')
      }).then(res => {
        this.$message.success(res.msg)
        this.onSearch()
        this.drawer = false
      })
    },
    onAddItem() {},
    changeRegion() {}

  }

}
</script>

<style lang="scss">
.plan2-page {
  background-color: #fff;
  height: calc(100% - 50px);
  padding-top: 20px;
  .form-box {
    width: 100%;
    background: #FAFAFA;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #DCDFE6;
    .form-box-top {
      border-bottom: 1px solid #DCDFE6;
      padding: 0 10px;
    }
    .form-box-body {
      padding: 10px;
      font-size: 14px;
      .add-btn {
        text-align: center;
        color: #1AAD19;
        margin: 16px 0;
        cursor: pointer;
      }
    }
  }
  .tree-node-icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
  .tree {
    border-right: 1px solid #E8E8E8;
    width:205px;
    .tree-header {
      height: 53px;
      padding-left: 18px;
      width: 100%;
      .icon {
        background-image: url('~@/assets/tree-icon.png');
        width: 17px;
        height: 17px;
        background-repeat:no-repeat;
        background-size: 100% 100%;
        margin-right: 7px;
      }
      font-size: 16px;
      line-height: 16px;

      font-weight: 400;
      color: #333333;
      border-bottom: 1px solid #E8E8E8;
    }
    .tree-content {
      padding: 15px 20px;
    }
  }

  .content-header {
    font-size: 20px;

    font-weight: 400;
    color: #333333;
    margin-bottom: 25px;
  }
  .line {
    height:1px;
    background-color: #E8E8E8;
    margin-bottom: 20px;
  }
  .drawer-content {
    padding: 20px;
    .el-select,
    .el-input {
      width: 100% !important;
    }
  }
}
</style>
